<!DOCTYPE HTML>
<html>
	<head>
		<link rel="stylesheet" href="css/layerslider.css" type="text/css">
		<link rel="stylesheet" href="css/stylels.css" type="text/css">
		<!--[if lt IE 9]>
			<script src="js/lib/html5.js"></script>
		<![endif]-->

		<script type="text/javascript">
	function login() {
		var a = document.getElementById('item1').value;
		var b = document.getElementById('item2').value;
		if(!a == "" && !b == ""){
			alert('');
		}
	}
</script>

	</head>
	<body>

		<table>
			<tr>
				<td style="padding-top: 5px;">
					<div id="dim">

						<div id="layerslider" style="width: 98%">

							<div class="ls-layer" rel="slidedelay: 10000">
								<img class="ls-bg" src="img/classroom.jpg" alt="layer"
									style="width: 100%;">
								<img class="ls-s2" src="gallery/l11.png" alt="sublayer"
									style="durationin: 2000; easingin: easeOutExpo; slidedirection: top; delayin: 1000;">
								<img class="ls-s3" src="gallery/l12.png" alt="sublayer"
									rel="durationin: 2300; slidedirection: bottom; delayin: 1000">
								<img class="ls-s5" src="gallery/l15.png" alt="sublayer"
									rel="durationin: 2300; slidedirection: bottom; delayin: 1500"
									style="cursor: pointer"
									onclick="javascript: window.location.href='/w4c'">
							</div>

							<div class="ls-layer" rel="slidedelay: 10000">
								<img class="ls-bg" src="img/fondo_energia.jpg" alt="layer"
									style="width: 100%;">
								<a
									title="Wave Community | Propagando la energ&iacute;a del conocimiento"
									href="/w4c/view/propagate.jsp" class="popup fancybox.ajax"
									style="color: white;"> <img class="ls-s3"
										src="gallery/l37.png" alt="sublayer"> </a>
							</div>

							<div class="ls-layer" rel="slidedelay: 10000">
								<img class="ls-bg" src="img/discounts.jpg" alt="layer"
									style="width: 100%;">
								<img class="ls-s5" src="gallery/l310.png" alt="sublayer"
									rel="durationin: 2300; slidedirection: left; delayin: 500">
								<p>
								<ul style="padding: 10px; left: 50px; top: 100px;">
									<li>
										<a title="Promociones" href="/w4c/view/promos/promos.jsp"
											class="popup fancybox.ajax"
											style="color: white; font-size: 16px; font-family: UBHelveticaLight; padding-bottom: 5px; text-decoration: none; font-weight: bold;">
											10% de descuento en pagos de Contado</a>
										<br />
									</li>
									<br />
									<li>
										<a title="Promociones" href="/w4c/view/promos/promos.jsp"
											class="popup fancybox.ajax"
											style="color: white; font-size: 16px; font-family: UBHelveticaLight; text-decoration: none; font-weight: bold;">5%
											de descuento en pagos de 2 parcialidades</a>
									</li>
									<br />
									<li>
										<a title="Promociones" href="/w4c/view/promos/promos.jsp"
											class="popup fancybox.ajax"
											style="color: white; font-size: 16px; font-family: UBHelveticaLight; text-decoration: none; font-weight: bold;">Liquida
											hasta en 4 parcialidades</a>
									</li>
									<br />
									<li>
										<a title="Promociones" href="/w4c/view/promos/promos.jsp"
											class="popup fancybox.ajax"
											style="color: white; font-size: 16px; font-family: UBHelveticaLight; text-decoration: none; font-weight: bold;">6
											meses sin intereses</a>
									</li>
									<br />
									<li>
										<a title="Promociones" href="/w4c/view/promos/promos.jsp"
											class="popup fancybox.ajax"
											style="color: white; font-size: 16px; font-family: UBHelveticaLight; text-decoration: none; font-weight: bold;">Descuentos
											a grupos</a>
									</li>
								</ul>

								</p>
							</div>

							<div class="ls-layer" rel="slidedelay: 10000">
								<img class="ls-bg" src="img/card_1.jpg" alt="layer"
									style="width: 100%;">
								<a title="Promociones" href="/w4c/view/promos/promos.jsp"
									class="popup fancybox.ajax"> <img class="ls-s5"
										src="gallery/l311.png" alt="sublayer"
										rel="durationin: 2300; slidedirection: left; delayin: 500">
								</a>
								<a title="Promociones" href="/w4c/view/promos/promos.jsp"
									class="popup fancybox.ajax"> <img class="ls-s5"
										src="gallery/l41.png" alt="sublayer"
										rel="durationin: 2300; slidedirection: left; delayin: 1500">
								</a>
							</div>


						</div>

					</div>
				</td>
				<td style="padding-left: 10px; padding-right: 10px; width: 100%">
					<div class="page" id="loginBox">
						<div class="bg"></div>
						<div id="innerLoginBox" class="inner_login" style="height: 250px;">
							<form action="/loginAction.action">
								<table>
									<tr>
										<td>
											Entra a W4C Apps
											<br />
											<br />
										</td>
									</tr>
									<tr>
										<td>
											<b>usuario :</b>
										</td>
									</tr>
									<tr>
										<td>
											<input type="text" id="item1"
												style="border: 1px solid #CCCCCC; width: 180px;" value="" />
										</td>
									</tr>
									<tr>
										<td style="padding-top: 10px;">
											<b>clave :</b>
										</td>
									</tr>
									<tr>
										<td>
											<input type="password" id="item2"
												style="border: 1px solid #CCCCCC; width: 180px;" value="" />
										</td>
									</tr>
									<tr>
										<td style="padding-top: 10px; padding-bottom: 20px;">
											<div style="width: 100%; text-align: right;">
												<a href="#" onclick="login()" class="login-link">Entrar</a>
											</div>
										</td>
									</tr>
									<tr>
										<td width="100%" align="center">
											<div style="width: 100%; text-align: right; font-size: 13px;">
												<a href="">&iquest; no est&aacute;s registrado
													a&uacute;n ?</a>
											</div>
										</td>
									</tr>
									<tr>
										<td width="100%" align="center">
											<div
												style="width: 100%; text-align: right; font-size: 13px; padding-top: 10px;">
												<a href="">&iquest; olvidaste tu contrase&ntilde;a ?</a>
											</div>
										</td>
									</tr>
								</table>
							</form>
						</div>

					</div>
				</td>
			</tr>
		</table>

		<script src="js/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
		<script src="js/lib/jquery.easing.min.js" type="text/javascript"></script>
		<script src="js/lib/layerslider.kreaturamedia.jquery.js"
			type="text/javascript"></script>
		<script type="text/javascript">
	$(document)
			.ready(
					function() {

						var dim = getDimentions();

						$('#layerslider')
								.layerSlider(
										{
											autoStart : true,
											firstLayer : 1,
											twoWaySlideshow : false,
											keybNav : true,
											touchNav : true,
											imgPreload : true,
											navPrevNext : true,
											navStartStop : false,
											navButtons : true,
											skin : 'defaultskin',
											skinsPath : 'css/skins/',
											pauseOnHover : true,
											globalBGColor : 'transparent',
											globalBGImage : false,
											animateFirstLayer : false,
											yourLogo : false,
											yourLogoStyle : 'position: absolute; z-index: 1002; left: -30px; top: -30px; height: 100px;',
											yourLogoLink : false,
											yourLogoTarget : '_blank',
											loops : 0,
											forceLoopNum : true,
											autoPlayVideos : true,
											autoPauseSlideshow : 'auto',
											youtubePreview : 'maxresdefault.jpg',

											// you can change this settings separately by layers or sublayers with using html style attribute

											slideDirection : 'right',
											slideDelay : 4000,
											parallaxIn : .45,
											parallaxOut : .45,
											durationIn : 1000,
											durationOut : 1000,
											easingIn : 'easeInOutQuint',
											easingOut : 'easeInOutQuint',
											delayIn : 0,
											delayOut : 0
										});

						$('#layerslider').css('height', dim.screenHeight - 320);
						$('#loginBox').css('height', dim.screenHeight - 320);

						$(window).resize(
								function() {
									dim = getDimentions();
									$('#layerslider').css('height',
											dim.screenHeight - 320);
									$('#loginBox').css('height',
											dim.screenHeight - 320);
									$('#innerLoginBox').css('height',
											dim.screenHeight - 300);
								});

					});
</script>
	</body>
</html>